<template>
  <div>
    <div v-if="supportOption">
      <el-select
        v-model="params.title"
        placeholder="请选择"
        @change="optionChanged"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="params.value"
        :placeholder="params.placeholder"
        class="inputBox"
        @keyup.enter="handleEnter"
      />
    </div>
    <div
      style="display: flex; align-items: center"
      v-else-if="supportRole"
    >
      <el-select
        v-model="roleOption"
        placeholder="请选择身份"
        @change="optionChanged"
      >
        <el-option
          v-for="item in roleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="inputId"
        placeholder="支持手机号、imUid、userId、shopId等"
        class="inputBox"
        @keyup.enter="handleEnter"
      />
    </div>
    <div
      style="display: flex; align-items: center"
      v-else
    >
      <div style="font-size: 18px; min-width: 40px">{{ title }}</div>
      <el-input
        v-model="inputId"
        placeholder="支持手机号、imUid、userId、shopId等"
        class="inputBox"
        @keyup.enter="handleEnter"
      />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

export default {
  props: {
    options: { type: Array },
    onEnter: { type: Function },
    title: { type: String },
  },
  setup(props) {
    const state = reactive({
      supportOption: false,
      params: {
        index: 0, // 选项索引
        title: "", // 选项标题
        placeholder: "", // 输入框默认文案
        key: "", // 参数名称
        value: "", // 输入框取值，具体参数值
      },
      supportRole: true,
      roleOptions: [
        { value: 0, label: "买家" },
        { value: 1, label: "卖家" },
      ],
      roleOption: 0,
      inputId: "",
    });

    let options = ref(props.options);
    let title = ref(props.title);

    const fillOptionParams = (index, value) => {
      if (state.supportOption) {
        var option = options.value[index];
        state.params.index = index;
        state.params.title = option.label;
        state.params.placeholder = option.placeholder;
        state.params.key = option.paramKey;
        state.params.value = value.trim();
      } else if (state.supportRole) {
        state.roleOption = parseInt(index);
        state.inputId = value.trim();
      } else {
        state.inputId = value.trim();
      }
    };

    const optionChanged = (e) => {
      if (state.supportOption) {
        fillOptionParams(e, state.params.value);
      } else {
        fillOptionParams(e, state.inputId);
      }
    };

    const emptyInputWarnning = () => {
      if (state.supportOption) {
        state.params.value = state.params.value.trim();
        if (state.params.value.length == 0) {
          ElMessage({
            message: state.params.placeholder,
            type: "error",
          });
          return true;
        }
      } else {
        state.inputId = state.inputId.trim();
        if (state.inputId.length == 0) {
          ElMessage({
            message: "请输入手机号、userId、shopId或imUid",
            type: "error",
          });
          return true;
        }
      }

      return false;
    };

    const paramsData = () => {
      var data = {};
      if (state.supportOption) {
        data[state.params.key] = state.params.value.trim();
      } else if (state.supportRole) {
        data.role = state.roleOption;
        data.input = state.inputId.trim();
      } else {
        data.input = state.inputId.trim();
      }

      return data;
    };

    const handleEnter = () => {
      console.log("onEnter");
      if (state.supportOption) {
        state.params.value = state.params.value.trim();
      } else {
        state.inputId = state.inputId.trim();
      }

      props.onEnter && props.onEnter();
    };

    onMounted(() => {
      console.log("props = ", props.title);
      state.supportRole = props.title ? false : true;
    });

    return {
      optionChanged,
      fillOptionParams,
      emptyInputWarnning,
      paramsData,
      handleEnter,
      ...toRefs(state),
    };
  },
};
</script>

<style scoped>
:deep(.el-select .el-input__inner) {
  width: 128px;
}

:deep(.el-select-dropdown) {
  min-width: 128px;
}

.inputBox {
  margin: 0px 10px;
  width: 300px;
}
</style>
